<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PowerOne 自动化测试 - 控制台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        dark: '#1D2129',
                        darker: '#0F172A',
                        'dark-card': '#272E3B',
                        'dark-hover': '#374151',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .card-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
        }
    </style>
</head>
<body class="bg-darker text-gray-200 font-inter h-screen flex flex-col">
    <!-- Header -->
    <header class="bg-dark border-b border-gray-700 py-3 px-4 flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <button class="lg:hidden text-gray-400 hover:text-white">
                <i class="fa fa-bars text-xl"></i>
            </button>
            <div class="flex items-center">
                <div class="w-8 h-8 rounded-md bg-primary flex items-center justify-center mr-2">
                    <i class="fa fa-cogs text-white"></i>
                </div>
                <h1 class="text-xl font-bold text-white">PowerOne</h1>
            </div>
        </div>
        <div class="flex items-center space-x-6">
            <div class="relative">
                <input type="text" placeholder="搜索项目、用例..." class="bg-dark-card rounded-full py-1.5 px-4 pl-10 text-sm w-48 lg:w-64 focus:outline-none focus:ring-2 focus:ring-primary/50">
                <i class="fa fa-search absolute left-4 top-2.5 text-gray-400"></i>
            </div>
            <div class="flex items-center space-x-3">
                <button class="relative text-gray-400 hover:text-white">
                    <i class="fa fa-bell text-xl"></i>
                    <span class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center">3</span>
                </button>
                <div class="flex items-center space-x-2">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="User Avatar" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
                    <span class="hidden md:inline text-sm font-medium">测试管理员</span>
                </div>
            </div>
        </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
        <!-- Sidebar -->
        <aside class="bg-dark w-16 lg:w-64 border-r border-gray-700 flex flex-col transition-all duration-300">
            <nav class="flex-1 py-4 overflow-y-auto scrollbar-hide">
                <ul class="space-y-1 px-2">
                    <li>
                        <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg bg-primary/10 text-primary">
                            <i class="fa fa-tachometer text-xl w-6 text-center"></i>
                            <span class="lg:inline text-sm font-medium">控制台</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white transition-colors">
                            <i class="fa fa-folder-open text-xl w-6 text-center"></i>
                            <span class="lg:inline text-sm font-medium">项目管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white transition-colors">
                            <i class="fa fa-list-alt text-xl w-6 text-center"></i>
                            <span class="lg:inline text-sm font-medium">测试用例</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white transition-colors">
                            <i class="fa fa-play-circle text-xl w-6 text-center"></i>
                            <span class="lg:inline text-sm font-medium">测试执行</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white transition-colors">
                            <i class="fa fa-bar-chart text-xl w-6 text-center"></i>
                            <span class="lg:inline text-sm font-medium">测试报告</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white transition-colors">
                            <i class="fa fa-bug text-xl w-6 text-center"></i>
                            <span class="lg:inline text-sm font-medium">缺陷管理</span>
                        </a>
                    </li>
                </ul>

                <div class="mt-8 px-4">
                    <h3 class="text-xs uppercase text-gray-500 font-semibold px-4 mb-3 lg:inline">最近项目</h3>
                    <a href="#" class="text-primary text-xs hover:underline lg:hidden block text-center mb-3">查看全部</a>
                    <ul class="space-y-1">
                        <li>
                            <a href="#" class="flex items-center space-x-3 px-4 py-2 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white transition-colors text-sm">
                                <span class="w-2 h-2 rounded-full bg-success"></span>
                                <span class="truncate lg:inline">电商平台UI自动化</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center space-x-3 px-4 py-2 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white transition-colors text-sm">
                                <span class="w-2 h-2 rounded-full bg-warning"></span>
                                <span class="truncate lg:inline">供应链管理系统</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center space-x-3 px-4 py-2 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white transition-colors text-sm">
                                <span class="w-2 h-2 rounded-full bg-danger"></span>
                                <span class="truncate lg:inline">财务报表系统API</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <div class="p-4 border-t border-gray-700">
                <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-hover hover:text-white transition-colors">
                    <i class="fa fa-cog text-xl w-6 text-center"></i>
                    <span class="lg:inline text-sm font-medium">系统设置</span>
                </a>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 overflow-y-auto bg-darker p-6">
            <div class="max-w-7xl mx-auto">
                <!-- Page Header -->
                <div class="mb-8">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-white">控制台</h2>
                    <p class="text-gray-400 mt-1">欢迎回来！查看您的测试项目状态和最近活动</p>
                </div>

                <!-- Quick Stats -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <div class="bg-dark-card rounded-xl p-6 card-shadow">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-gray-400 text-sm font-medium">总项目数</p>
                                <h3 class="text-3xl font-bold text-white mt-1">12</h3>
                                <p class="text-success text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 3 个 (本月)
                                </p>
                            </div>
                            <div class="w-12 h-12 rounded-lg bg-primary/20 flex items-center justify-center text-primary">
                                <i class="fa fa-folder-open text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-dark-card rounded-xl p-6 card-shadow">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-gray-400 text-sm font-medium">测试用例</p>
                                <h3 class="text-3xl font-bold text-white mt-1">247</h3>
                                <p class="text-success text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 18 个 (本周)
                                </p>
                            </div>
                            <div class="w-12 h-12 rounded-lg bg-secondary/20 flex items-center justify-center text-secondary">
                                <i class="fa fa-list-alt text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-dark-card rounded-xl p-6 card-shadow">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-gray-400 text-sm font-medium">今日执行</p>
                                <h3 class="text-3xl font-bold text-white mt-1">36</h3>
                                <div class="flex items-center mt-2 space-x-2">
                                    <span class="text-success text-sm flex items-center"><i class="fa fa-check-circle mr-1"></i> 28</span>
                                    <span class="text-danger text-sm flex items-center"><i class="fa fa-times-circle mr-1"></i> 8</span>
                                </div>
                            </div>
                            <div class="w-12 h-12 rounded-lg bg-warning/20 flex items-center justify-center text-warning">
                                <i class="fa fa-play-circle text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-dark-card rounded-xl p-6 card-shadow">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-gray-400 text-sm font-medium">未解决缺陷</p>
                                <h3 class="text-3xl font-bold text-white mt-1">14</h3>
                                <p class="text-danger text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 2 个 (今日)
                                </p>
                            </div>
                            <div class="w-12 h-12 rounded-lg bg-danger/20 flex items-center justify-center text-danger">
                                <i class="fa fa-bug text-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Charts and Project List -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                    <!-- Test Execution Trend -->
                    <div class="lg:col-span-2 bg-dark-card rounded-xl p-6 card-shadow">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="text-lg font-semibold text-white">测试执行趋势</h3>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 text-xs bg-primary/10 text-primary rounded-full hover:bg-primary/20 transition-colors">周</button>
                                <button class="px-3 py-1 text-xs bg-gray-700 text-gray-300 rounded-full hover:bg-gray-600 transition-colors">月</button>
                                <button class="px-3 py-1 text-xs bg-gray-700 text-gray-300 rounded-full hover:bg-gray-600 transition-colors">年</button>
                            </div>
                        </div>
                        <div class="h-64">
                            <canvas id="executionTrendChart"></canvas>
                        </div>
                    </div>

                    <!-- Test Case Status -->
                    <div class="bg-dark-card rounded-xl p-6 card-shadow">
                        <h3 class="text-lg font-semibold text-white mb-6">用例状态分布</h3>
                        <div class="h-64 flex items-center justify-center">
                            <canvas id="caseStatusChart"></canvas>
                        </div>
                        <div class="grid grid-cols-2 gap-4 mt-4">
                            <div class="flex items-center space-x-2">
                                <span class="w-3 h-3 rounded-full bg-success"></span>
                                <span class="text-sm text-gray-300">通过 (68%)</span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="w-3 h-3 rounded-full bg-danger"></span>
                                <span class="text-sm text-gray-300">失败 (12%)</span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="w-3 h-3 rounded-full bg-warning"></span>
                                <span class="text-sm text-gray-300">阻塞 (8%)</span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="w-3 h-3 rounded-full bg-gray-500"></span>
                                <span class="text-sm text-gray-300">未执行 (12%)</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recent Projects -->
                <div class="bg-dark-card rounded-xl p-6 card-shadow">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-lg font-semibold text-white">最近项目</h3>
                        <a href="#" class="text-primary text-sm hover:underline">查看全部</a>
                    </div>

                    <div class="overflow-x-auto">
                        <table class="w-full min-w-[640px]">
                            <thead>
                                <tr class="border-b border-gray-700">
                                    <th class="text-left py-3 px-4 text-sm font-medium text-gray-400">项目名称</th>
                                    <th class="text-left py-3 px-4 text-sm font-medium text-gray-400">测试集</th>
                                    <th class="text-left py-3 px-4 text-sm font-medium text-gray-400">用例数</th>
                                    <th class="text-left py-3 px-4 text-sm font-medium text-gray-400">最近执行</th>
                                    <th class="text-left py-3 px-4 text-sm font-medium text-gray-400">状态</th>
                                    <th class="text-right py-3 px-4 text-sm font-medium text-gray-400">操作</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-700">
                                <tr class="hover:bg-dark-hover/50 transition-colors">
                                    <td class="py-4 px-4">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 rounded-md bg-primary/20 flex items-center justify-center mr-3">
                                                <i class="fa fa-shopping-cart text-primary"></i>
                                            </div>
                                            <div>
                                                <div class="text-sm font-medium text-white">电商平台UI自动化</div>
                                                <div class="text-xs text-gray-400">last updated: 今天 14:30</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-4 px-4 text-sm text-gray-300">6 个测试集</td>
                                    <td class="py-4 px-4 text-sm text-gray-300">87</td>
                                    <td class="py-4 px-4 text-sm text-gray-300">今天 10:15</td>
                                    <td class="py-4 px-4">
                                        <span class="px-2 py-1 text-xs rounded-full bg-success/20 text-success">通过</span>
                                    </td>
                                    <td class="py-4 px-4 text-right">
                                        <button class="text-gray-400 hover:text-white mr-3"><i class="fa fa-ellipsis-v"></i></button>
                                    </td>
                                </tr>
                                <tr class="hover:bg-dark-hover/50 transition-colors">
                                    <td class="py-4 px-4">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 rounded-md bg-secondary/20 flex items-center justify-center mr-3">
                                                <i class="fa fa-link text-secondary"></i>
                                            </div>
                                            <div>
                                                <div class="text-sm font-medium text-white">供应链管理系统</div>
                                                <div class="text-xs text-gray-400">last updated: 昨天 09:45</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-4 px-4 text-sm text-gray-300">4 个测试集</td>
                                    <td class="py-4 px-4 text-sm text-gray-300">52</td>
                                    <td class="py-4 px-4 text-sm text-gray-300">昨天 16:30</td>
                                    <td class="py-4 px-4">
                                        <span class="px-2 py-1 text-xs rounded-full bg-warning/20 text-warning">部分通过</span>
                                    </td>
                                    <td class="py-4 px-4 text-right">
                                        <button class="text-gray-400 hover:text-white mr-3"><i class="fa fa-ellipsis-v"></i></button>
                                    </td>
                                </tr>
                                <tr class="hover:bg-dark-hover/50 transition-colors">
                                    <td class="py-4 px-4">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 rounded-md bg-danger/20 flex items-center justify-center mr-3">
                                                <i class="fa fa-file-text text-danger"></i>
                                            </div>
                                            <div>
                                                <div class="text-sm font-medium text-white">财务报表系统API</div>
                                                <div class="text-xs text-gray-400">last updated: 2025/8/28</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-4 px-4 text-sm text-gray-300">3 个测试集</td>
                                    <td class="py-4 px-4 text-sm text-gray-300">41</td>
                                    <td class="py-4 px-4 text-sm text-gray-300">2025/8/29</td>
                                    <td class="py-4 px-4">
                                        <span class="px-2 py-1 text-xs rounded-full bg-danger/20 text-danger">失败</span>
                                    </td>
                                    <td class="py-4 px-4 text-right">
                                        <button class="text-gray-400 hover:text-white mr-3"><i class="fa fa-ellipsis-v"></i></button>
                                    </td>
                                </tr>
                                <tr class="hover:bg-dark-hover/50 transition-colors">
                                    <td class="py-4 px-4">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 rounded-md bg-warning/20 flex items-center justify-center mr-3">
                                                <i class="fa fa-users text-warning"></i>
                                            </div>
                                            <div>
                                                <div class="text-sm font-medium text-white">用户管理系统</div>
                                                <div class="text-xs text-gray-400">last updated: 2025/8/25</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-4 px-4 text-sm text-gray-300">2 个测试集</td>
                                    <td class="py-4 px-4 text-sm text-gray-300">29</td>
                                    <td class="py-4 px-4 text-sm text-gray-300">2025/8/26</td>
                                    <td class="py-4 px-4">
                                        <span class="px-2 py-1 text-xs rounded-full bg-success/20 text-success">通过</span>
                                    </td>
                                    <td class="py-4 px-4 text-right">
                                        <button class="text-gray-400 hover:text-white mr-3"><i class="fa fa-ellipsis-v"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        // Initialize Execution Trend Chart
        const trendCtx = document.getElementById('executionTrendChart').getContext('2d');
        new Chart(trendCtx, {
            type: 'line',
            data: {
                labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                datasets: [
                    {
                        label: '通过',
                        data: [18, 24, 22, 35, 28, 12, 28],
                        borderColor: '#52C41A',
                        backgroundColor: 'rgba(82, 196, 26, 0.1)',
                        tension: 0.4,
                        fill: true
                    },
                    {
                        label: '失败',
                        data: [5, 3, 7, 4, 8, 2, 8],
                        borderColor: '#FF4D4F',
                        backgroundColor: 'rgba(255, 77, 79, 0.1)',
                        tension: 0.4,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            color: '#9CA3AF',
                            boxWidth: 12,
                            usePointStyle: true,
                            pointStyle: 'circle'
                        }
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false,
                            drawBorder: false
                        },
                        ticks: {
                            color: '#9CA3AF'
                        }
                    },
                    y: {
                        grid: {
                            color: 'rgba(156, 163, 175, 0.1)',
                            drawBorder: false
                        },
                        ticks: {
                            color: '#9CA3AF',
                            precision: 0
                        }
                    }
                }
            }
        });

        // Initialize Case Status Chart
        const statusCtx = document.getElementById('caseStatusChart').getContext('2d');
        new Chart(statusCtx, {
            type: 'doughnut',
            data: {
                labels: ['通过', '失败', '阻塞', '未执行'],
                datasets: [{
                    data: [68, 12, 8, 12],
                    backgroundColor: [
                        '#52C41A',
                        '#FF4D4F',
                        '#FAAD14',
                        '#6B7280'
                    ],
                    borderWidth: 0,
                    borderRadius: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '70%',
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
    </script>
</body>
</html>